<template>
  <div class="h100 rel">
    <div class="h100" :class="{'right-hide':!sensorsPopup,'bottom-hide':!chartTabPopup}">
      <TheCesiumMap @renderMap="renderMap" :viewPondId.sync="viewPondId" :dataPondId.sync="dataPondId" :monitorTypes="monitorTypes" @pointChange="pointChange"/>
    </div>

    <div class="blur"></div>

    <div class="left">
      <Kuangs v-model="dataPondId" :viewPondId.sync="viewPondId" :pondTreeList="pondTreeList"/>
    </div>

    <div class="right" v-show="sensorsPopup">
        <Sensors :pond="dataPond" v-model="monitorCode" :MonitorTypeId.sync="MonitorTypeId" @treeDataChange="treeDataChange"/>
    </div>

    <div :class="sensorsPopup ? 'right-btn' : 'right-btn-right'" @click="rightBtn">
        <div></div>
    </div>

    <div class="bottom" v-show="chartTabPopup"   v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)">
      <ChartTabNew :visible="chartTabPopup" :MonitorCode="monitorCode"  :MonitorTypeId="+MonitorTypeId"/>
    </div>

    <div :class="chartTabPopup ? 'bottom-btn' : 'bottom-btn-bottom'" @click="bottomBtn">
        <div></div>
    </div>
  </div>

</template>

<script>
import TheCesiumMap from "./component/TheCesiumMap";
import Kuangs from "./component/Kuangs"
import Sensors from "./component/Sensors"
import ChartTab from "./component/ChartTab"
import ChartTabNew from "./component/ChartTabNew"
import {staticComputer} from "@/public/util/vue";
import {MonitorType} from "@/view/client/component/TheCesiumMap/data";
export default {
  name: "index",
  components:{
    TheCesiumMap,
    Kuangs,
    Sensors,
    ChartTab,
    ChartTabNew
  },
  data(){
    return {
      basePond: null,
      monitorCode: null,
      monitorTypes:[],
      MonitorTypeId: null,
      sensorsPopup: true,
      chartTabPopup: true,
      baseDataPondId: null,//数据id
      viewPondId: null,//视图id
      loading: true
    }
  },
  watch:{
    baseDataPondId(){
      this.sensorsPopup = true
      this.chartTabPopup = true
    },
    dataPondId:{
      immediate:true,
      handler() {
       this.loading = true
        if(this.loadingTimer){
          clearTimeout(this.loadingTimer)
        }
       this.loadingTimer = setTimeout(()=>{
         this.loading = false
       },1000)
      }
    }
  },

  computed: {
    dataPond() {
      const ponds = this.findDeepChildren(this.pondTreeList)
      return ponds.find(item=> item.id === this.dataPondId)
    },
    dataPondId:{
      get() {
        return this.baseDataPondId || this.defaultFirst && this.defaultFirst.id
      },
      set(val) {
        this.baseDataPondId = val
      }
    },
    cesiumMap: staticComputer(),
    pondTreeList(){
      return this.$store.state.leftMenu || []
    },
    defaultFirst() {
      // try {
      //   return this.pondTreeList[0].children[1].children[0]
      // }catch (e){
      //   return {}
      // }
      return this.findFirst({children:this.pondTreeList}) || {}
    }
  },
  methods:{
    findDeepChildren(list) {
      return list.reduce((res,item) => {
        if(item.children){
          const children = this.findDeepChildren(item.children)
          return res.concat(children)
        }
        return res.concat(item)
      },[])
    },
    pointChange(point){
      if(point.monitorTypeId === MonitorType.Video){
        return
      }
      this.MonitorTypeId = point.monitorTypeId
      this.monitorCode = point.monitorCode
    },
    treeDataChange(treeData) {
      this.monitorTypes = treeData.map(item=>item.key)
    },
    findFirst(item) {
      if(item.children && item.children.length){
        return this.findFirst(item.children[0])
      }
      return item
    },
    renderMap(cesiumMap){
      this.cesiumMap= cesiumMap
    },

    rightBtn(){
      this.sensorsPopup = !this.sensorsPopup;
    },
    bottomBtn() {
      this.chartTabPopup = !this.chartTabPopup;
    }
  }
}
</script>

<style lang="scss">
@import "~@/public/style/index.scss";
@import "~@/asset/style/common.scss";
</style>
<style lang="scss" scoped>
>>>{
  .compass{
    right: 1.7rem;
    bottom: 2rem;
  }
  .distance-legend{
    right: 1.6rem;
    bottom: 1.825rem;
  }
}
.bottom-hide{
  >>>{
    .compass{
      right: 1.7rem;
      bottom: .25rem;
    }
    .distance-legend{
      right: 1.6rem;
      bottom: .05rem;
    }
  }
}
.bottom-hide.right-hide,.right-hide{
  >>>{
    .compass{
      right: .2rem;
      bottom: .25rem;
    }
    .distance-legend{
      right: .1rem;
      bottom: .05rem;
    }
  }
}
.right-hide{
  >>>{
    .tool{
      right: .05rem;
    }
  }
}
>>> {
  .el-input__inner{
    background-color: #fff0 !important;
  }
}

.blur {
  pointer-events: none;
  position: absolute;
  z-index: 0;
  left: 0;
  top:0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to left,  rgba(0,0,0, 1) 1%, transparent 20% ),
  linear-gradient(to bottom, rgba(0,0,0,1) 1%, transparent 5%),
  linear-gradient(to right, rgba(0,0,0,1) 1%, transparent 20%)
  ,linear-gradient(to top, rgba(0,0,0,1) 1%, transparent 35%);
}
.top {
  left: .1rem;
  top: .25rem;
  min-width: 16%;
  height: .6rem;
  background-color:transparent;
  p {
    margin:0;
    padding:0;
  }

  p:nth-child(1) {
    color: #BCEAED;
    font-size: .1rem;
    font-weight: 600;
    background-size:auto .16rem ;
    text-align: center;

    img {
      max-height: .3rem;
    }
  }
  p:nth-child(2) {
    font-size: .21rem;
    font-weight: 500;
    color:#fff;
    line-height: .6rem;
  }
  p:nth-child(3) {
    color:#EEE;
    position: absolute;
    bottom:0;
    letter-spacing: 1px;
  }
}
.header {
  position: fixed;
  z-index: 9999;
  top: 10px;
  right: 0;
  height: .3rem;
  width: calc(100% - 520px);
  background-image: linear-gradient(to left,  rgba(0,0,0, 0.6) 1%, transparent 95% );
}

.left, .right, .bottom {
  position: absolute;
  z-index: 9;
  background-color: rgba(0, 0, 0, .25);
}
.left {
  left:0;
  top: .5rem;
  width: 1.1rem;
  height: calc(100% - 100px);
}
.right {
  right:0;
  top: .5rem;
  width: 1.5rem;
  height: calc(100% - 100px);
}
.right-btn {
  position: absolute;
  right: 1.5rem;
  top: 2.2rem;
  width: .1rem;
  height: .35rem;
  background: #2c3e50;
  border-radius: 4px;
  cursor: pointer;
  div {
    margin-top: .12rem;
    width: .1rem;
    height: .13rem;
    background: url("../../asset/image/right-btn-arrow.png") no-repeat center center/100% 100%;
  }
}
.right-btn-right {
  position: absolute;
  right: 0;
  top: 2.2rem;
  width: .1rem;
  height: .35rem;
  background: #2c3e50;
  border-radius: 4px;
  cursor: pointer;
  div {
    margin-top: .12rem;
    width: .1rem;
    height: .13rem;
    background: url("../../asset/image/left-bnt-arrow.png") no-repeat center center/100% 100%;
  }
}
.bottom {
  width: calc(100% - 1.5rem - 1.1rem - .05rem);
  //height:360px;
  bottom:5px;
  left: 1.125rem;
  background-color: rgba(0, 0, 0, .25);
}
.bottom-btn {
  position: absolute;
  right: 4.95rem;
  bottom: 1.79rem;
  width: .35rem;
  height: .1rem;
  background: #2c3e50;
  border-radius: 4px;
  cursor: pointer;
  div {
    margin-left: .12rem;
    width: .13rem;
    height: .1rem;
    background: url("../../asset/image/bottom-btn-arrow.png") no-repeat center center/100% 100%;
  }
}
.bottom-btn-bottom {
  position: absolute;
  right: 4.95rem;
  bottom: 0;
  width: .35rem;
  height: .1rem;
  background: #2c3e50;
  border-radius: 4px;
  cursor: pointer;
  div {
    margin-left: .12rem;
    width: .13rem;
    height: .1rem;
    background: url("../../asset/image/top-btn-arrow.png") no-repeat center center/100% 100%;
  }
}
</style>
